<!--  -->
<template>
  <div class="nav">
    <section class="container">
      <img src="../assets/img/Logo.png" @click="$router.push('/home')" alt="" />
      <ul>
        <!-- <li :class="$route.path === '/home' ? "active" : ' ' ">首页</li> -->
        <li
          @click="$router.push('/home')"
          class="home"
          :class="{ active: $route.path.includes('/home') ? true : false }"
        >
          首页
        </li>
        <li class="goods" v-for="(item, i) in category" :key="i">
          {{ item.name }}
          <div class="goods-classify">
            <div class="triangle"></div>
            <ul>
              <li
                class="goods-classify-dog"
                v-for="item1 in item.children"
                @click="gogoodsInfo(item1.catId)"
                :key="item1.catId"
              >
                {{ item1.name }}
              </li>
            </ul>
          </div>
        </li>
        <li
          @click="$router.push('/news')"
          class="news"
          :class="{ active: $route.path.includes('/news') ? true : false }"
        >
          宠物新闻
        </li>
        <li
          @click="$router.push('/order')"
          class="order"
          :class="{ active: $route.path === '/order' ? true : false }"
        >
          我的订单
        </li>
        <li
          @click="$router.push('/mycenter')"
          class="mycenter"
          :class="{ active: $route.path === '/mycenter' ? true : false }"
        >
          个人中心
        </li>
      </ul>
      <div class="search">
        <input
          v-model="key"
          class="search-input"
          type="text"
          placeholder="请输入关键词"
        /><span class="iconfont icon-search span-search" @click="handleSerch"></span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      // 搜索商品
      key: "",
      category: [],
    };
  },
  created() {
    this.getTabbar();
  },

  methods: {
    gogoodsInfo(id) {
      //  this.$router.push(`/goods/info?id=${id}`)
      this.$router.push({ path: "/goods/info", query: { id } });
    },
    //  搜索商品
    handleSerch() {
      if (this.key === "") {
        return;
      }
      // const { data: res } = await this.$http.get(
      //   `/dqxmall/prosysproinfo/getAllShopByCatalogId?key=${this.key}`
      // );
      // console.log(res);
      let queryinfo = this.key;
      this.$router.push({ path: "/search", query: { queryinfo } });
      // this.searchList = [];
      // if (res.code === 0) {
      //   // this.searchList = res.page.list;
      //   res.page.list.forEach((item) => {
      //     if (item.publishStatus) {
      //       var data = {};
      //       data.id = item.id;
      //       data.catalogId = item.catalogId;
      //       data.saleCount = 0;
      //       item.skus.forEach((item1) => {
      //         data.saleCount += item1.saleCount;
      //       });
      //       data.imgSrc = item.images[0];
      //       data.proName = item.proName;
      //       data.price = item.price;
      //       this.searchList.push(data);
      //     }
      //   });
      //   this.$store.dispatch("setSearchList", this.searchList);
      //   this.key = "";
      // }
      this.key = "";
    },
    //  获取分类导航数据
    async getTabbar() {
      const { data: res } = await this.$http.get("dqxmall/prosyscategory/list/tree");
      // console.log(res);
      if (res.code === 0) {
        this.category = res.data;
      }
      // console.log(this.category);
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total";
.nav {
  position: fixed;
  z-index: 8;
  margin-top: 40px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid rgb(80, 79, 79);
  background-color: #fff;
  section {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 120px;
      height: 60px;
    }
    ul {
      width: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      li {
        font-size: 18px;
        color: #242b38;
        position: relative;

        &.active {
          font-weight: bold;
          color: #0a328e;
        }
        // 全部宠物\宠物食品下拉框
        .goods-classify,
        .foods-classify {
          position: absolute;
          top: 30px;
          left: -50%;
          background-color: rgb(66, 62, 62);
          width: 120px;
          z-index: 10;
          display: none;
          .triangle {
            position: absolute;
            top: -10px;
            right: 20px;
            height: 0;
            width: 0;
            margin: 0 20px;
            border-bottom: 10px solid rgb(66, 62, 62);
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            z-index: 10;
          }
          ul {
            width: 120px;
            display: flex;
            flex-direction: column;

            justify-content: center;
            li {
              width: 100%;
              padding: 10px 0;
              color: white;
              text-align: center;
            }
            .goods-classify-dog,
            .goods-classify-cat,
            .goods-classify-hamster,
            .goods-classify-other,
            .foods-classify-dog,
            .foods-classify-cat,
            .foods-classify-hamster,
            .foods-classify-other,
            .foods-classify-fish {
              &:hover {
                background-color: red;
              }
            }
          }
          &:hover {
            .goods-classify {
              display: block;
            }
          }
        }
        &:hover {
          .goods-classify {
            display: block;
          }
          .foods-classify {
            display: block;
          }
        }
      }
    }
    .search {
      height: 42px;
      width: 260px;
      // background-color: pink;
      //  box-sizing: border-box ;
      .search-input {
        float: left;
        height: 40px;
        width: 210px;
        outline: none;
        border: 1px solid rgb(110, 108, 108) !important;
        border-radius: 20px 0 0 20px;
        padding: 0px;
        padding-left: 20px;
        border: 0;
        box-sizing: border-box;
      }
      .span-search {
        float: right;
        display: block;
        height: 40px;
        width: 50px;
        background-color: rgb(73, 73, 200);
        border-radius: 0 20px 20px 0;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
        color: white;
      }
    }
  }
}
</style>
